import { Component, OnInit, OnDestroy, TemplateRef } from '@angular/core';
import { Course } from '../Interfaces/Course';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

import { CourseService } from '../../services/course.service';

@Component({
  selector: 'app-course',
  template: `
    <div class="container">
        <div class="operation">
            <button class="btn btn-info" (click)="openAddModal(addTemplate)">新增</button>
        </div>
        <div class="list">
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">ID</th>
                    <th scope="col">课程</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody *ngIf="courses">
                    <tr *ngFor="let item of courses; index as i;"  >
                        <td>{{ i+1}}</td>
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>
                            <button (click)="openEditModal(editTemplate, item)" class="btn btn-primary btn-sm" type="button">编辑</button>
                            <button (click)="deleteCourse(item)" class="btn btn-primary btn-sm" type="button">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <ng-template #addTemplate>
            <div class="modal-header">
                <h4 class="modal-title pull-left">新增</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="addModalRef.hide()">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form #addForm="ngForm" (submit)="addCourse(addForm.value)">
                <div class="form-group row">
                    <label for="name" class="col-sm-3 col-form-label">课程名</label>
                    <div class="col-sm-9">
                        <input type="text"
                        required
                        class="form-control"
                        name="name"
                        [(ngModel)]="course.name"
                        placeholder="如：蛙泳18天入门课"
                        #uname="ngModel"
                        >
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-2">
                        <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                    </div>
                </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="addModalRef.hide()">关闭</button>
            </div>
        </ng-template>

        <ng-template #editTemplate>
            <div class="modal-header">
                <h4 class="modal-title pull-left">编辑</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="editModalRef.hide()">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form #editForm="ngForm" (submit)="editCourse(editForm.value)">
                <input type="hidden"
                        name="id"
                        *ngIf="course"
                        #uid="ngModel"
                        [(ngModel)]="course.id" />
                <div class="form-group row">
                    <label for="name" class="col-sm-3 col-form-label">课程名</label>
                    <div class="col-sm-9">
                        <input type="text"
                        *ngIf="course"
                        required
                        class="form-control"
                        name="name"
                        [(ngModel)]="course.name"
                        placeholder="如：蛙泳18天入门课"
                        #uname="ngModel"
                        >
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-2">
                        <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                    </div>
                </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="editModalRef.hide()">关闭</button>
            </div>
        </ng-template>
    </div>
  `,
  styles: []
})
export class CourseComponent implements OnInit , OnDestroy {
    course: Course = new Course();
    courses: Course[];
    addModalRef: BsModalRef;
    editModalRef: BsModalRef;
    deleteModalRef: BsModalRef;

    constructor(
        private modalService: BsModalService,
        private courseService: CourseService
    ) {
    }

    ngOnInit() {
        // console.log('init course');
        // this.modalService.onHidden.subscribe(res => { this.getCourses(); } );
        this.getCourses();
    }


    ngOnDestroy() {
        // console.log('destory course');
        // this.modalService.onHidden.unsubscribe();
    }

    getCourses() {
        this.courseService.getCourses().subscribe(res => {
            this.courses = res.data  as Course[];
        });
    }

    addCourse() {
        this.courseService.addCourse(this.course).subscribe(res => {
            if (!res.errors) { alert('添加成功'); this.getCourses(); } else { alert('添加失败！'); }
        });
    }
    deleteCourse(course: Course) {
        this.course = course;
        if (confirm('确认删除么?')) {
            this.courseService.deleteCourse(this.course)
            .subscribe(res  => {
                if (!res.errors) { alert('删除成功'); this.getCourses(); } else { alert('删除失败！'); }
            });
        }
    }

    editCourse(course: Course) {
        this.courseService.editCourse(this.course).subscribe(res => {
            if (!res.errors) {
                alert('编辑成功');
                this.getCourses();
            } else {
                alert('编辑失败！');
            }
        });
    }

    openAddModal(template: TemplateRef<any>) {
        this.addModalRef = this.modalService.show(template);
        // this.addModalRef = this.modalService.show(CourseAddModalComponent);
        // this.addModalRef.content.title = '新增课程';
        // const emptyCourse = new Course();
        // this.addModalRef.content.course = emptyCourse;
    }

    openEditModal(template: TemplateRef<any>, item: Course) {
        this.course = JSON.parse(JSON.stringify(item));
        this.editModalRef = this.modalService.show(template);
    }
}

